import React, { useEffect, useMemo, useState } from "react";
import { Button, Modal, Form, Input, Radio } from "antd";

const Froms = ({ visible, onCreate, onCancel, title, okText, data }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    console.log("qq", data);
    if (!!data) {
      form.setFieldsValue({ ...data });
    } else {
      form.resetFields();
    }
  }, [data]);
  const [value, setValue] = useState(1);
  return (
    <Modal
      visible={visible}
      title={title}
      data={data}
      okText={okText}
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="horizontal"
        name="form_in_modal"
        initialValues={{
          modifier: "public",
        }}
      >
        <Form.Item name="_id" hidden>
          <Input />
        </Form.Item>
        <Form.Item
          name="username"
          label="姓名"
          // initialValue={data.username}
          rules={[
            {
              required: true,
              message: "请填写姓名",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: "请填写密码",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="sex"
          label="性别"
          rules={[
            {
              required: true,
              message: "请填写性别",
            },
          ]}
        >
          <Radio.Group value={value}>
            <Radio value={1}> 男 </Radio> <Radio value={2}> 女 </Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="tel"
          label="手机号"
          rules={[
            {
              required: true,
              message: "请填写手机号",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="class_grade"
          label="班级"
          rules={[
            {
              required: true,
              message: "请填写班级",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="organization"
          label="社团"
          rules={[
            {
              required: true,
              message: "请填写社团",
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Froms;
